<template>
    <div>
        <div style="display: flex;justify-content:flex-end">
            <a-input-search style="width: 300px ;" placeholder="输入电话搜索用户" enter-button="搜索" size="small"
                @search="onSearch" />
        </div>
        <a-table :columns="columns" :data-source="user" bordered>
            <template v-for="col in ['nickName', 'teleNumber', 'rcode']">
                <div :key="col">
                    <template>
                        {{ user }}
                    </template>
                </div>
            </template>
        </a-table>

        <a-table v-if="user!=null" :columns="columns" :data-source="userlist" bordered>
            <template v-for="col in ['nickName', 'teleNumber', 'rcode']">
                <div :key="col">
                    <template>
                        {{ text }}
                    </template>
                </div>
            </template>
        </a-table>

    </div>
</template>
<script>
//import axios from 'axios'
import { mapState } from 'vuex';
const columns = [
    {
        title: '昵称',
        dataIndex: 'nickName',
        width: '15%',
        scopedSlots: { customRender: 'nickName' },
    },
    // {
    //     title: '密码',
    //     dataIndex: 'password',
    //     width: '15%',
    //     scopedSlots: { customRender: 'password' },
    // },
    // {
    //     title: '姓名',
    //     dataIndex: 'name',
    //     width: '15%',
    //     scopedSlots: { customRender: 'name' },
   // },
    {
        title: '电话',
        dataIndex: 'teleNumber',
        width: '15%',
        scopedSlots: { customRender: 'teleNumber' },
    },
    {
        title: '统一认证码',
        dataIndex: 'rcode',
        width: '15%',
        scopedSlots: { customRender: 'rcode' },
    },
];

const data = [];

export default {
   
    data() {
        this.cacheData = data.map(item => ({ ...item }));
        return {
           
            data,      
            columns,
            editingKey: '',
            
        };
    },
    mounted() {
        this.$store.dispatch('userList')
        this.data = [...this.userlist]
    },
    
    computed:{
        ...mapState({
            userlist:(state)=>{

                return state.userinfo.userlist;
            },
            
        }),
       ...mapState({
           user: (state) => {
               return state.userinfo.user
           }
       })

    },
     methods: {
        onSearch(value) {
      
         value && this.$store.dispatch('userbytel',value)
        },
    },
    
};
</script>
<style scoped>

.editable-row-operations a {
    margin-right: 8px;
}

</style>
